<template>
  <el-dialog title="镜片类库存预警设置" :close-on-click-modal="false" :visible.sync="visible" fullscreen center>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <el-tabs type="border-card" @tab-click="tabChange">
      <el-tab-pane label="库存预警设置(区间)">
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="80px">
          <el-row :gutter="15">
            <el-col :span="8">
              <el-form-item label="制造商" prop="supplyName">
                <el-input v-model="dataForm.supplyName" placeholder="制造商" readonly @focus="chooseSupply"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属品种" prop="brandName">
                <el-input v-model="dataForm.brandName" placeholder="所属品种" readonly @focus="chooseBrand"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="仓位" prop="redAlert">
                <el-select v-model="dataForm.stockId" placeholder="请选择" @change="stockSelect($event)">
                  <el-option v-for="item in stockOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="15">
            <el-col :span="12">
              <el-form-item label="球镜">
                <el-row>
                  <el-col :span="11">
                    <el-select v-model="dataForm.mirrorBallTop" placeholder="请选择球镜上限">
                      <el-option v-for="item in mirrorBallOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </el-col>
                  <el-col class="line" :span="2" style="text-align: center;">-</el-col>
                  <el-col :span="11">
                    <el-select v-model="dataForm.mirrorBallFloor" placeholder="请选择球镜下限">
                      <el-option v-for="item in mirrorBallOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="柱镜">
                <el-row>
                  <el-col :span="11">
                    <el-select v-model="dataForm.columnMirrorTop" placeholder="请选择柱镜上限">
                      <el-option v-for="item in columnMirrorOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </el-col>
                  <el-col class="line" :span="2" style="text-align: center;">-</el-col>
                  <el-col :span="11">
                    <el-select v-model="dataForm.columnMirrorFloor" placeholder="请选择柱镜下限">
                      <el-option v-for="item in columnMirrorOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="15">
            <el-col :span="8">
              <el-form-item label="库存上限" prop="inventoryTop">
                <el-input v-model="dataForm.inventoryTop" placeholder="库存上限"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="库存下限" prop="inventoryFloor">
                <el-input v-model="dataForm.inventoryFloor" placeholder="库存下限"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="红色预警" prop="redAlert">
                <el-input v-model="dataForm.redAlert" placeholder="红色预警"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="库存预警设置(二维)">
      </el-tab-pane>
    </el-tabs>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit" :loading="ischeck" v-prevent-re-click>确定</el-button>
    </span>
    <!-- 弹窗，查询制造商列表 -->
<!--    <el-dialog title="查询制造商" :visible.sync="supplyVisible" :close-on-click-modal="false" append-to-body>
      <div class="avue-crud">
        <el-table :data="supplyDataList" border v-loading="supplyDataListLoading">
          <el-table-column type="index" width="40">
            <template slot-scope="scope">
              <el-radio v-model="dataForm.supplyId" :label="scope.row.id" style="position: relative;left: 6px;top:-2px;"
                @change="checkSupply(scope.row)"></el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="code" header-align="center" align="center" label="制造商编码"></el-table-column>
          <el-table-column prop="name" header-align="center" align="center" label="制造商名称"></el-table-column>
        </el-table>
      </div>
    </el-dialog> -->
    <!-- 弹窗，查询品种列表 -->
    <!-- <el-dialog title="品种查询" :visible.sync="brandVisible" :close-on-click-modal="false" append-to-body>
      <div class="avue-crud">
        <el-table :data="brandDataList" border v-loading="brandDataListLoading">
          <el-table-column type="index" width="40">
            <template slot-scope="scope">
              <el-radio v-model="dataForm.brandId" :label="scope.row.id" style="position: relative;left: 6px;top:-2px;"
                @change="checkBrand(scope.row)"></el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="code" header-align="center" align="center" label="品种编码"></el-table-column>
          <el-table-column prop="name" header-align="center" align="center" label="品种名称"></el-table-column>
        </el-table>
      </div>
    </el-dialog> -->
    <search-supply v-if="supplyVisible" ref="supplyDialog" @refreshData="getSupplyData"></search-supply>
    <search-brand v-if="brandVisible" ref="brandDialog" @refreshData="getBrandData"></search-brand>
  </el-dialog>
</template>

<script>
  import {
    getSupplyDataList,
    getGoodsBrandDataList,
    getStockDataList,
    warningSettingSaveLensInterval
  } from '@/api/eims/warning-setting'

  import SearchSupply from '@/components/business/SearchSupply'
  import SearchBrand from '@/components/business/SearchBrand'
  export default {
    data() {
      return {
        ischeck: false,
        visible: false,
        tabIndex: '1',
        dataForm: {
          supplyId: '', // 制造商ID
          supplyName: '', // 制造商name
          brandId: '', // 品种ID
          brandName: '', // 品种name
          stockId: '', // 仓位id
          stockName: '', // 仓位name
          mirrorBallTop: '', // 球镜上限
          mirrorBallFloor: '', // 球镜下限
          columnMirrorTop: '', // 柱镜上限
          columnMirrorFloor: '', // 柱镜下限
          inventoryTop: '', // 库存上限
          inventoryFloor: '', // 库存下限
          redAlert: '' // 红色预警
        },
        supplyVisible: false, // 制造商弹窗
        supplyDataListLoading: false, // 制造商表格加载图标
        supplyDataList: [], // 制造商表格数据
        brandVisible: false, // 品种弹窗
        brandDataListLoading: false, // 品种表格加载图表
        brandDataList: [], // 品种表格数据
        stockOptions: [], // 仓位数据
        dataRule: { // 验证规则
          // inventoryTop: [{ required: true, message: '库存上限不能为空', trigger: 'blur' }],
          // inventoryFloor: [{ required: true, message: '库存下限不能为空', trigger: 'blur' }],
          // redAlert: [{ required: true, message: '红色预警不能为空', trigger: 'blur' }]
        },
        mirrorBallOptions: [], // 球镜范围数据
        columnMirrorOptions: [] // 柱镜范围数据
      }
    },
    components: {
      SearchSupply,
      SearchBrand
    },
    methods: {
      init(id) {
        this.visible = true
        for (let x in this.dataForm) {
          this.dataForm[x] = ''
        }
        this.$nextTick(() => {
          getStockDataList().then(response => {
            if(response.data.code == '0'){
              let dataList = response.data.data.records
              let options = []
              dataList.forEach(item => {
                options.push({
                  value: item.id,
                  label: item.name
                })
              })
              this.stockOptions = options
            }else{
              this.$message.error(response.data.msg)
            }
          })
          // 球镜范围----大佬的代码
          this.mirrorBallOptions = Array(52 * 4 + 1).fill(0).map((a, i) => {
            return {
              value: (26 - i / 4).toFixed(2).toString().replace(/^(\d)/, '+$1')
            }
          })
          // 柱镜范围
          this.columnMirrorOptions = Array(52 * 4 + 1).fill(0).map((a, i) => {
            return {
              value: (0.00 - i / 4).toFixed(2)
            }
          })
          // 球镜范围----我的代码
          // this.mirrorBallOptions = Array(52*4+1).fill(0).map((a,i) => {
          //   return ((26 - i/4) > 0) ? {value: '+' + (26 - i/4).toFixed(2)} : {value: (26 - i/4).toFixed(2)}
          // })
        })
      },
      tabChange(row) {
        this.tabIndex = (row.index == '1') ? '2' : '1'
        for (let index in this.dataForm) {
          this.dataForm[index] = ''
        }
      },
      // 查询供应商列表
      chooseSupply() {
        this.supplyVisible = true
        this.$nextTick(() => {
          this.$refs.supplyDialog.init({ctgId: ''})
        })
      },
      // 查询品种列表
      chooseBrand() {
        if (this.dataForm.supplyId) {
          this.brandVisible = true
          this.$nextTick(() => {
            this.$refs.brandDialog.init({ctgId: '',supplyId: this.dataForm.supplyId})
          })
        } else {
          this.$message.warning('请选择所属制造商')
        }
      },
      getSupplyData(data){
        this.$set(this.dataForm,'supplyId',data.id)
        this.$set(this.dataForm,'supplyName',data.name)
      },
      getBrandData(data){
        this.$set(this.dataForm,'brandId',data.id)
        this.$set(this.dataForm,'brandName',data.name)
      },
      // checkSupply(row) {
      //   this.dataForm.supplyId = row.id
      //   this.dataForm.supplyName = row.name
      //   this.supplyVisible = false
      // },
      // checkBrand(row) {
      //   this.dataForm.brandId = row.id
      //   this.dataForm.brandName = row.name
      //   this.brandVisible = false
      // },
      stockSelect($event) {
        this.stockOptions.forEach(item => {
          if (item.value == $event) {
            this.dataForm.stockName = item.label
          }
        })
      },
      // 表单提交
      dataFormSubmit() {
        if (this.tabIndex == '1') { // 镜片类库存量预警设置(区间)
          this.ischeck = true
          this.$refs['dataForm'].validate((valid) => {
            if (valid) {
              if (this.dataForm.inventoryFloor * 1 > this.dataForm.inventoryTop * 1) {
                this.ischeck = false
                this.$message.warning('库存量下限不能大于库存量上限')
                return
              }
              if (this.dataForm.redAlert * 1 > this.dataForm.inventoryFloor * 1) {
                this.ischeck = false
                this.$message.warning('库存量红色预警不能大于库存量下限')
                return
              }
              warningSettingSaveLensInterval(this.dataForm).then(response => {
                if(response.data.code == '0'){
                  this.$message.success('设置成功')
                  this.visible = false
                  this.$emit('opticDataSetting')
                }else{
                  this.$message.error(response.data.msg)
                }
                this.ischeck = false
              }).catch(() => {
                this.ischeck = false
              })
            } else {
              this.ischeck = false
            }
          })
        } else { // 镜片类库存量预警设置(二维)

        }
      }
    }
  }
</script>
